{% extends "layout/content.twig" %}

{% block main %}
    <style type="text/css">
        .admin-info {
            padding: 50px 20px 35px 20px;
        }

        .admin-info .photo {
            display: block;
            width: 130px;
            height: 130px;
            margin: 0 auto;
            border-radius: 50%;
        }

        .admin-info .photo img {
            display: block;
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 50%;
        }

        .layui-user {
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding-top: 15px;
            color: #333;
            font-size: 16px;
        }

        .login-time {
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            color: #c2c2c2;
        }
    </style>
    <div class="layui-row layui-col-space20">
        <div class="layui-col-sm12 layui-col-md4 layui-col-lg4">
            <div class="layui-card">
                <div class="layui-card-header">{{ __('profile') }}</div>
                <div class="layui-card-body">
                    <div class="admin-info layui-font-gray">
                        <div class="photo" id="avatar">
                            <img src="{% if userinfo.avatar %} {{ userinfo.avatar }} {% else %} {{ static('img/avatar.png') }} {% endif %}">
                        </div>
                        <h3 class="layui-user user-nickname">
                            {{ userinfo.nickname }}
                        </h3>
                        <div class="layui-font-gray text-center">
                            {{ permission.roles|join(' | ') }}
                        </div>

                        <div class="layui-row">
                            <div class="layui-col-xs6 layui-col-md6 text-right">
                                {{ __('login_at') }}&nbsp;&nbsp;:&nbsp;&nbsp;
                            </div>
                            <div class="layui-col-xs6 layui-col-md6">
                                {{ userinfo.last_login_time|default('') }}
                            </div>
                        </div>

                        <div class="layui-row">
                            <div class="layui-col-xs6 layui-col-md6 text-right">
                                {{ __('login_ip') }}&nbsp;&nbsp;:&nbsp;&nbsp;
                            </div>
                            <div class="layui-col-xs6 layui-col-md6">
                                {{ userinfo.last_login_ip|default('') }}
                            </div>
                        </div>

                        <div class="layui-row">
                            <div class="layui-col-xs6 layui-col-md6 text-right">
                                {{ __('user.wechat_bind') }}&nbsp;&nbsp;:&nbsp;&nbsp;
                            </div>
                            <div class="layui-col-xs6 layui-col-md6">
                                {% if  userinfo.wechat_openid %}
                                    <div>
                                        已绑定
                                    </div>
                                {% else %}
                                    <button class="layui-btn layui-btn-xs layui-btn-normal" id="wechat-bind">
                                        点击绑定
                                    </button>
                                {% endif %}
                            </div>
                        </div>

                    </div>

                    <form class="layui-form">
                        <input type="hidden" name="token" value="">
                        <div class="layui-form-item">
                            <label class="layui-form-label"> {{ __('nickname') }}</label>
                            <div class="layui-input-inline">
                                <input type="text"
                                       name="nickname"
                                       autocomplete="off"
                                       placeholder=" {{ __('nickname') }}"
                                       class="layui-input"
                                       disabled
                                       value="{{ userinfo.nickname }}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{ __('password') }}</label>
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
                                        id="update-password">{{ __('btn.modify') }}
                                </button>
                            </div>
                        </div>
                        <template id="update-password-template">
                            <div class="layui-form-item mt10">
                                <label class="layui-form-label">{{ __('old_password') }}</label>
                                <div class="layui-input-block">
                                    <input type="password" name="old_password"
                                           placeholder="{{ __('enter') }}{{ __('old_password') }}"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">{{ __('new_password') }}</label>
                                <div class="layui-input-block">
                                    <input type="password" name="new_password"
                                           placeholder="{{ __('enter') }}{{ __('new_password') }}"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">{{ __('confirm_password') }}</label>
                                <div class="layui-input-block">
                                    <input type="password" name="confirm_password"
                                           placeholder="{{ __('enter') }}{{ __('confirm_password') }}"
                                           class="layui-input">
                                </div>
                            </div>
                        </template>

                        <div class="layui-form-item">
                            <label class="layui-form-label">{{ __('phone') }}</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" disabled placeholder="{{ __('phone') }}"
                                       class="layui-input"
                                       value="{% if userinfo.phone %}{{ userinfo.phone|slice(0,3) }}****{{ userinfo.phone|slice(7) }}{% endif %}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">email</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email" disabled lay-verify="required|email" autocomplete="off"
                                       placeholder="email" class="layui-input" value="{{ userinfo.email }}">
                            </div>
                        </div>
                        <div class="layui-form-item layer-footer">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-disabled" disabled
                                        lay-submit lay-filter="updateInfo"
                                        data-refresh="false">
                                    {{ __('btn.submit') }}
                                </button>
                            </div>

                            <div class="layui-input-block mt10">
                                <div class="pt10 layui-font-12 ">
                                    <span class="text-light">
                                          {{ __('user.edit_tips') }}
                                    </span>

                                    <span id="updateInfo" class="layui-font-blue"
                                          style="cursor: pointer">
                                        {{ __('user.click_to_verify') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12 layui-col-md8 layui-col-lg8">
            <div class="layui-card">
                <div class="layui-card-header">{{ __('permission.user_login') }}</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="page-table-render" lay-filter="login-log"></table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        layui.use(['table', 'upload', 'toast', 'form', 'http', 'clipboard'], function () {
            let table = layui.table
            let upload = layui.upload
            let toast = layui.toast
            let form = layui.form
            let http = layui.http

            let options = table_common_options('{{ auth_route('profile/login') }}', [
                {
                    field: 'id',
                    width: 80,
                    title: 'Id'
                },
                {
                    field: 'ip',
                    width: 130,
                    title: '{{ __('user_login.ip') }}'
                },
                {
                    field: 'browser',
                    title: '{{ __('user_login.browser') }}'
                },
                {
                    field: 'platform',
                    title: '{{ __('user_login.platform') }}'
                },
                {
                    field: 'device',
                    width: 100,
                    title: '{{ __('user_login.device') }}'
                },
                {
                    field: 'is_mobile_text',
                    width: 80,
                    title: '{{ __('user_login.is_mobile') }}'
                },
                {
                    field: 'status_text',
                    width: 100,
                    title: '{{ __('user_login.status') }}',
                    templet: function (row) {
                        if (parseInt(row.status) === 0) {
                            return '<span title="' + row['reason'] + '" class="layui-font-gray">失败：' + row['reason'] + '</span>'
                        } else {
                            return '<span class="layui-font-blue">' +
                                row['status_text'] + '</span>'
                        }
                    }
                },
                {
                    field: 'created_at',
                    title: '登录时间'
                }
            ])

            options.toolbar = false
            table.render(options)

            upload.render({
                'elem': '#avatar',
                'url': '{{ auth_route('profile/avatar') }}',
                done: function (res, index) {
                    if (res.code) {
                        toast.center(res.msg ? res.msg : '上传失败')
                    } else {
                        $('#avatar img').attr('src', res.data.url)
                        parent.$('.userAvatar').attr('src', res.data.url)
                    }
                }
            })

            form.on('submit(updateInfo)', function (data) {
                http.post('{{ auth_route('profile/updateInfo') }}', data.field, function (res) {
                    if (res.code === 0 && res.data.nickname) {
                        parent.$('.user-nickname').text(res.data.nickname)
                        $('.user-nickname').text(res.data.nickname)
                    }
                    toast.response(res)
                })
                return false
            })

            $('#update-password').on('click', function () {
                let template = $('#update-password-template').html()
                let index = layer.open(
                    {
                        title: '{{ __('dialog.modify_password') }}',
                        content: template,
                        type: 1,
                        area: ['700px', '400px'],
                        btn: ['{{ __('btn.ok') }}', '{{ __('btn.cancel') }}'],
                        yes: function () {
                            let old_password = $('[name=old_password]').val()
                            let new_password = $('[name=new_password]').val()
                            let confirm_password = $('[name=confirm_password]').val()
                            http.form('{{ auth_route('profile/setPassword') }}', {
                                old: old_password,
                                new: new_password,
                                confirm: confirm_password
                            }, function (res) {
                                if (res.code === 0) {
                                    layer.close(index)
                                }
                            })
                        }
                    }
                )
            })

            $('#updateInfo').on('click', function () {
                let index = layer.prompt({
                    formType: 1,
                    value: '',
                    maxlength: 18,
                    title: '{{ __('dialog.enter_password') }}',
                    btn: ['{{ __('btn.ok') }}', '{{ __('btn.cancel') }}']
                }, function (value) {
                    if (value.length === 0) {
                        layer.close(index)
                        return false
                    }
                    http.post('{{ auth_route('profile/verifyPassword') }}', {password: value}, function (res) {
                        if (res.code) {
                            toast.error(res)
                        } else {
                            $('[name=token]').val(res.data)
                            $('[name=nickname],[name=phone],[name=email],[lay-submit]').removeAttr('disabled')
                            $('[lay-submit]').removeClass('layui-btn-disabled')
                            layer.close(index)
                        }
                    })
                })
            })

            $('#wechat-bind').on('click', function () {
                http.post('{{ auth_route('profile/wechatBind') }}', {}, function (res) {
                    if (res.data.ticket || '') {
                        layer.open({
                            type: 1,
                            offset: ['100px'],
                            title: '{{ __('user.wechat_scan_bind') }}',
                            content: '<img src=' + res.data.ticket + ' style="width:200px;height:200px;padding:50px"/>',
                        })
                    }
                })
            })
        })
    </script>
{% endblock %}